{% load seahub_tags i18n staticfiles %}
{% load render_bundle from webpack_loader %}

<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}">
<head>
<title>{{doc_title}}</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="{% trans "File Collaboration Team Organization" %}" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<link rel="shortcut icon" href="{{ MEDIA_URL }}{{ favicon_path }}" />
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}grapheditor/styles/grapheditor.css">
<script type="text/javascript">
  // Parses URL parameters. Supported parameters are:
  // - lang=xy: Specifies the language of the user interface.
  // - touch=1: Enables a touch-style user interface.
  // - storage=local: Enables HTML5 local storage.
  // - chrome=0: Chromeless mode.
  var urlParams = (function(url)
  {
    var result = new Object();
    var idx = url.lastIndexOf('?');

    if (idx > 0)
    {
      var params = url.substring(idx + 1).split('&');

      for (var i = 0; i < params.length; i++)
      {
        idx = params[i].indexOf('=');

        if (idx > 0)
        {
          result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
        }
      }
    }

    return result;
  })(window.location.href);

  // Default resources are included in grapheditor resources
  mxLoadResources = false;
</script>

<script type="text/javascript" src="{{ MEDIA_URL }}grapheditor/js/Init.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}grapheditor/deflate/pako.min.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}grapheditor/deflate/base64.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}grapheditor/jscolor/jscolor.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}grapheditor/sanitizer/sanitizer.min.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}grapheditor/mxClient.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}grapheditor/js/EditorUi.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}grapheditor/js/Editor.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}grapheditor/js/Sidebar.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}grapheditor/js/Graph.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}grapheditor/js/Format.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}grapheditor/js/Shapes.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}grapheditor/js/Actions.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}grapheditor/js/Menus.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}grapheditor/js/Toolbar.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}grapheditor/js/Dialogs.js"></script>

<script src="{{ STATIC_URL }}scripts/i18n/{{ LANGUAGE_CODE }}/djangojs.js"></script>
</head>

<body>

<script type="text/javascript">
  window.app = {
    config: {
      mediaUrl: '{{ MEDIA_URL }}',
      logoPath: '{{ logo_path }}',
      logoWidth: '{{ logo_width }}',
      logoHeight: '{{ logo_height }}',
      siteTitle: '{{ site_title }}',
      siteRoot: '{{ SITE_ROOT }}',
      loginUrl: '{{ LOGIN_URL }}',
      isPro: '{{ is_pro }}',
      lang: '{{ LANGUAGE_CODE }}',
      rawPath: '{{ raw_path }}',
      repoID: '{{ repo.id }}',
      path: '{{ path }}',
      parentDir: '{{ parent_dir }}',
      filename: '{{ filename }}',
      fileServerRoot: '{{ FILE_SERVER_ROOT }}'
    }
  };

  window.RESOURCES_PATH = '{{ MEDIA_URL }}grapheditor/resources';
  window.RESOURCE_BASE = '{{ MEDIA_URL }}grapheditor/resources/grapheditor';
  window.STENCIL_PATH = '{{ MEDIA_URL }}grapheditor/stencils';
  window.IMAGE_PATH = '{{ MEDIA_URL }}grapheditor/images';
  window.STYLE_PATH = '{{ MEDIA_URL }}grapheditor/styles';
</script>
{% render_bundle 'draw' %}

<script type="text/javascript">
  // Extends EditorUi to update I/O action states based on availability of backend
  (function()
  {
    var editorUiInit = EditorUi.prototype.init;

    EditorUi.prototype.init = function()
    {
      editorUiInit.apply(this, arguments);
      this.actions.get('export').setEnabled(false);

      // Updates action states which require a backend
      if (!Editor.useLocalStorage)
      {
        mxUtils.post(OPEN_URL, '', mxUtils.bind(this, function(req)
        {
          var enabled = req.getStatus() != 404;
          this.actions.get('open').setEnabled(enabled || Graph.fileSupport);
          this.actions.get('import').setEnabled(enabled || Graph.fileSupport);
          this.actions.get('save').setEnabled(true);
          this.actions.get('saveAs').setEnabled(enabled);
          this.actions.get('export').setEnabled(enabled);
        }));
      }
    };

    EditorUi.prototype.saveFile = function()
    {
      if (this.editor.graph.isEditing())
  		{
  			this.editor.graph.stopEditing();
  		}

  		var xml = mxUtils.getXml(this.editor.getGraphXml());
      window.saveFile(xml);
      this.editor.setModified(false);
    }

    // Adds required resources (disables loading of fallback properties, this can only
    // be used if we know that all keys are defined in the language specific file)
    mxResources.loadDefaultBundle = false;
    var bundle = mxResources.getDefaultBundle(RESOURCE_BASE, mxLanguage) ||
      mxResources.getSpecialBundle(RESOURCE_BASE, mxLanguage);

    // Fixes possible asynchronous requests
    mxUtils.getAll([bundle, STYLE_PATH + '/default.xml'], function(xhr)
    {
      // Adds bundle text to resources
      mxResources.parse(xhr[0].getText());

      // Configures the default graph theme
      var themes = new Object();
      themes[Graph.prototype.defaultThemeName] = xhr[1].getDocumentElement();

      // Main
      window.editor = new Editor(urlParams['chrome'] == '0', themes);
      window.editorUi = new EditorUi(editor);
      window.mxUtils = mxUtils;
      loadFile(editorUi);
    }, function()
    {
      document.body.innerHTML = '<center style="margin-top:10%;">Error loading resource files. Please check browser console.</center>';
    });
  })();
</script>


</body>
</html>
